<template>
  <div class="huanxing-top">
    <div class="huanxing-top-left">
      <i :class="!isCollapse ? 'icon-s-fold' :'icon-s-unfold'" @click="setCollapse"></i>
    </div>
    <top-menu />
    <div class="huanxing-top-right">
      <div class="item">
        <el-tooltip class="box-item" effect="dark" content="搜索" placement="bottom">
          <i class="icon-sousuo" @click="search"></i>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip class="box-item" effect="dark" content="主题" placement="bottom">
          <i class="icon-zhuti" @click="opemThemeDialog"></i>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip class="box-item" effect="dark" content="源码地址" placement="bottom">
          <i class="icon-gitee2" @click="goCodeAddress"></i>
        </el-tooltip>
      </div>
      <div class="item">
        <!-- 布局大小设置 -->
        <el-tooltip class="box-item" effect="dark" content="布局大小" placement="bottom">
          <top-size></top-size>
        </el-tooltip>
      </div>

      <div class="item">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="!data.isFullscreen ? '全屏' :'取消全屏'"
          placement="bottom"
        >
          <i
            :class="!data.isFullscreen ? 'icon-quanping' : 'icon-quxiaoquanping'"
            @click="handleScreen"
          ></i>
        </el-tooltip>
      </div>
      <div class="item">
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              shape="square"
              class="user-avatar"
              :size="35"
              fit="fill"
              :src="userInfo.avatar"
            ></el-avatar>&nbsp;
            <i class="icon-xiala"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link  to="/info/index">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="huanxing-overlay" v-if="data.isSearch" @click.left="data.isSearch=false"></div>
    <!-- 查询 -->
    <top-search v-if="data.isSearch"></top-search>
    <!-- 主题 -->
    <el-dialog v-model="data.dialog" title="主题" width="50%">
      <top-theme ref="topTheme" />
    </el-dialog>
  </div>
</template>
<script >
import { defineComponent, reactive, computed, onBeforeMount } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import TopSearch from './top-search.vue'
import TopTheme from './top-theme.vue'
import TopMenu from './top-menu.vue'
import TopSize from './top-size.vue'
import screenfull from 'screenfull'
import { setTheme } from 'utils/util'
export default defineComponent({
  components: {
    TopSearch,
    TopTheme,
    TopMenu,
    TopSize,
  },
  setup() {
    const data = reactive({
      isSearch: false,
      dialog: false,
      isFullscreen: false,
    })
    const store = useStore()
    const $route = useRouter()
    //主题
    const themeKey = computed(() => store.getters.themeKey)
    setTheme(themeKey.value)

    //用户信息
    const userInfo = computed(() => store.getters.userInfo)

    const setCollapse = () => {
      store.commit('SET_COLLAPSE')
    }
    const isCollapse = computed(() => store.getters.isCollapse)
    const logout = () => {
      ElMessageBox.confirm('是否退出系统, 是否继续??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        store.dispatch('LogOut').then(() => {
          $route.push({ path: '/login' })
        })
      })
    }
    const search = () => {
      data.isSearch = true
    }
    const goCodeAddress = () => {
      window.open('https://gitee.com/lijiaxing_boy/huanxing-ui', '_blank')
    }
    const opemThemeDialog = () => {
      data.dialog = true
    }
    const handleScreen = () => {
      if (!screenfull.isEnabled) {
        ElMessage.error('您的浏览器不支持全屏')
        return
      }
      screenfull.toggle()
      data.isFullscreen = data.isFullscreen ? false : true
    }
    return {
      isCollapse,
      userInfo,
      data,
      setCollapse,
      logout,
      search,
      goCodeAddress,
      opemThemeDialog,
      handleScreen,
    }
  },
})
</script>
<style  lang="scss" scoped>
.huanxing-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: #00000190;
  overflow: auto;
  display: flex;
  justify-content: center;
}
</style>